<template>
	<view class="mainpadding">
		<view class="ffffff radius mainpadding">
			<view class="titletext">诉讼请求</view>
			<view class="flexleft margin_top">
				<view class="huiyuan margin_right1"></view>
				<view class="nostrongtext">{{dataAll.sspgtype.name}}</view>
			</view>
		</view>
		<view class="ffffff radius mainpadding">
			<view class="titletext">案件事实</view>
			<view class="margin_top">
				<u-steps :current="dataAll.dadata.length" direction="column" dot>
					<u-steps-item :title="item.jg_des" v-for="item in dataAll.dadata" :key="item.sspg_da_id"></u-steps-item>
				</u-steps>
			</view>
		</view>
		<view class="ffffff radius mainpadding flexaround">
			<view class="flexcolumn" style="border: 1rpx solid #9e8d5e;padding: 15rpx 60rpx;">
				<view class="titletext" style="color: #9e8d5e;">{{Number(dataAll.rate)>100?100:dataAll.rate}}%</view>
				<view class="flexcenter margin_top">
					<view class="yuan margin_right3" style="background-color: #9e8d5e;"></view>
					<view class="nostrongtext">胜诉</view>
				</view>
			</view>
			<view class="flexcolumn" style="border: 1rpx solid #9e8d5e;padding: 15rpx 60rpx;">
				<view class="titletext" style="color: #9e8d5e;">{{Number(dataAll.rate)>100?0:100-Number(dataAll.rate)}}%</view>
				<view class="flexcenter margin_top">
					<view class="yuan margin_right3" style="background-color: #ffc279;"></view>
					<view class="nostrongtext">败诉</view>
				</view>
			</view>
		</view>
		<view class="charts-box">
			<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
		</view>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				chartData: {},
				dataAll:{},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#9e8d5e", "#ffc279", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.init()
		},
		methods: {
			init(){
				httpRequest.request('/api/index/getSspgRecord', 'GET', {
					id:this.listid
				}).then(res => {
					let chartdata = {
						series: [{
							data: [{
								"name": "胜诉",
								"value": Number(res.data.score)>Number(res.data.total_score)?res.data.total_score:res.data.score
							}, {
								"name": "败诉",
								"value":  Number(res.data.score)>Number(res.data.total_score)?0:Number(res.data.total_score)-Number(res.data.score)
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(chartdata));
					this.dataAll = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 200px;
	}

	.yuan {
		width: 15rpx;
		height: 15rpx;
		border-radius: 60rpx;

	}
</style>